<template>
    <view class="main">
        <view class="search">
            <nut-searchbar @search="$goUrl(`/subPackage/index/searchPage?key=${searchValue}`)" placeholder="搜索"
                v-model="searchValue" background="#f6f6f6" shape="square" input-background="#fff">
                <template #leftin>
                    <nut-icon name="search2" />
                </template>
            </nut-searchbar>
        </view>
        <view class="con">
            <view class="title dispaly-just-between">
                <view class="left">历史搜索</view>
                <view class="right" @click="delHistory">
                    <image src="/static/icon/del.png" />
                </view>
            </view>
            <view class="h-list dispaly-center flex-warp">
                <view class="item" v-for="item in historyList" :key="item" @click="selectHistoryItem(item)">{{ item }}
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import { getHistory, clearHistory } from '@/api/apiList'
import { onLoad } from '@dcloudio/uni-app';

const historyList = ref([])
const getHistoryList = async () => {
    const res = await getHistory()
    if (res.code == 200) {
        historyList.value = res.data
    }
}

onLoad(() => {
    getHistoryList()
})

const searchValue = ref('')
// 清空历史记录
const delHistory = () => {
    uni.showModal({
        title: '提示',
        content: '清空历史记录',
        success: async function (res) {
            if (res.confirm) {
                const res = await clearHistory()
                if (res.code == 200) {
                    getHistoryList()
                }
            }
        }
    });
}

// 点击历史记录
const selectHistoryItem = (item) => {
    searchValue.value = item
    uni.navigateTo({
        url: `/subPackage/index/searchPage?key=${item}`
    })
}
</script>
<style lang="scss" scoped>
.main {
    .con {
        padding: 0 30rpx;

        .title {
            margin-top: 60rpx;

            .left {
                font-family: PingFang-SC, PingFang-SC;
                font-weight: bold;
                font-size: 28rpx;
                color: #000000;
            }

            .right {
                image {
                    width: 36rpx;
                    height: 36rpx;
                }
            }
        }

        .h-list {
            .item {
                margin: 20rpx 20rpx 20rpx 0;
                padding: 18rpx 26rpx;
                background: #FFFFFF;
                border-radius: 30rpx;
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 500;
                font-size: 26rpx;
                color: #3F3F3F;
            }
        }
    }
}
</style>